<template>
  <div>
    <el-aside class="aside" :style="{width:`${myparent?65:260}px`,transition:'0.4s',}">
        <el-menu
        router 
        default-active="/home/index" 
        class="el-menu-vertical-demo" 
        background-color="#545c64"
        text-color="#fff"
        :style="{height:'100vh'}"
        :collapse="myparent"
        active-text-color="#ffd04b"
        style="border: none;">

          <el-menu-item style="margin:15px 0;">
            <img width="30px" src="../assets/logo.svg">
            <template slot="title">
              <span style="font-size:1.2em;color:#efefef;font-weight:bold"> &nbsp;&nbsp;木木影城后台管理系统</span>
            </template>
          </el-menu-item>

          <!-- 动态显示导航菜单 -->
          <template v-for="item in menu" >
            <el-menu-item v-if="item.type == 'menu-item'" :key="item.title" :index="item.link" >
              <!-- @click="addTab(editableTabsValue,item.title,item.link)" -->
              <i :class="item.icon"></i>
              <template slot="title">{{ item.title }}</template>
            </el-menu-item>

            <el-submenu v-else :index="item.link" :key="item.link">
              <template slot="title">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.title }}</span>
              </template>
              <el-menu-item v-for="item2 in item.children" :key="item2.title" :index="item2.link" >
                <!-- @click="addTab(editableTabsValue,item2.title,item.link)" -->
                <i :class="item2.icon"></i>
                <span slot="title">{{ item2.title }}</span>
              </el-menu-item>
            </el-submenu>
          </template>

        </el-menu>
      </el-aside>
  </div>
</template>

<script>
  export default {
    props:['myparent'],
    data() {
      return {
        menu:[],
        // isCollapse:false,
      }
    },
    mounted () {
      let menu = [
        {type:'menu-item',title:'首页',link:'/home/index',icon:'el-icon-message'},
        {type:'sub-menu',link:'1',title:'演员管理',icon:'el-icon-location',children:[
          {type:'menu-item1',title:'演员列表',link:'/home/actor-list',icon:'el-icon-notebook-2'},
          {type:'menu-item1',title:'新增演员',link:'/home/actor-add',icon:'el-icon-plus'}
        ]},

        {type:'sub-menu',link:'12',title:'导演管理',icon:'el-icon-location',children:[
          {type:'menu-item1',title:'导演列表',link:'/home/director-list',icon:'el-icon-notebook-2'},
          {type:'menu-item1',title:'新增导演',link:'/home/director-add',icon:'el-icon-plus'}
        ]},
        {type:'sub-menu',link:'3',title:'电影管理',icon:'el-icon-location',children:[
          {type:'menu-item1',title:'电影列表',link:'/home/movie-list',icon:'el-icon-notebook-2'},
          {type:'menu-item1',title:'新增电影',link:'/home/movie-add',icon:'el-icon-plus'}
        ]},
        {type:'sub-menu',link:'4',title:'电影院管理',icon:'el-icon-location',children:[
          {type:'menu-item1',title:'电影院列表',link:'/home/cinema-list',icon:'el-icon-notebook-2'},
          {type:'menu-item1',title:'新增电影院',link:'/home/cinema-add',icon:'el-icon-plus'}
        ]},

      ];
      this.menu = menu
    },
  }
</script>

<style lang="scss" scoped>
.aside::-webkit-scrollbar {
  display: none;
}
.aside{
  box-shadow: 0 0 5px 3px #999;
  border-right: none;
}
</style>